<template>
  <div :class="screenData == 'small' ? 'smallgrandsonMenu grandsonMenu' : 'grandsonMenu'" id="grandsonMenu">
    <i :class="position"></i>
    <ul>
      <li
        v-for="(item, i) in list"
        :key="i"
        v-show="item.type - 0 == 1"
        @click="itemClick(item, i)"
      >
        <p
          :class="{
            ellipsisText: true,
            active: currentIndex === i
          }"
        >
          {{ item.permission_name }}
        </p>
        <span></span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'GrandsonMenu',
  props: {
    list: {
      type: Array,
      required: true
    },
    remainder: {
      type: Number,
      required: true
    }
  },
  computed: {
    list2() {
      return this.list
    },
    remainder2() {
      return this.remainder
    },
    position() {
      console.log(this.remainder)
      if (this.remainder === 1) {
        return 'left'
      } else if (this.remainder === 2) {
        return 'content'
      } else {
        return 'right'
      }
    }
  },
  watch: {
    list2: {
      deep: true,
      handler(val) {
        console.log(val)
      }
    },
    remainder2: {
      deep: true,
      handler(val) {
        console.log(val)
      }
    }
  },
  data() {
    return {
      currentIndex: '',
      screenData: ''
    }
  },
  created() {
    this.screenData = localStorage.getItem('screen')
    console.log(this.screenData)
  },
  activated() {},
  methods: {
    itemClick(item, i) {
      this.currentIndex = i
      // this.pageTurn(path)
      this.pageTurnParams(item.route_name, { action: 'refresh' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
